<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.image{
				width: 400px;
				height: 688px;
				border: 1px solid hotpink;
			}
			.select{
				color: #f66;
				background: #999;
				font-weight: bold;
			}
			.box{
				position: relative;
				display: inline-block;
				width: 200px;
				height: 200px;
				border: 2px solid #f77;
			}
			.box1{
				position: absolute;
				display: inline-block;
				width: 50px;
				height: 50px;
				border: 2px solid #000;
				top: 100px;
				left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="imgBox">
			<img src="img/1.png" alt="鼬" class="image">
			<button type="button" id="btn_src">获取src的值</button>
			<button type="button" id="btn_alt">获取alt的值</button>
			<button type="button" id="btn_next">切换图片</button>
			<button type="button" id="btn_remove">删除样式</button>
			<button type="button" id="btn_add">添加样式</button>
		</div>
		<div class="form">
			<label><input type="radio" name="fruit" value="苹果">苹果</label>
			<label><input type="radio" name="fruit" value="香蕉">香蕉</label>
			<label><input type="radio" name="fruit" value="西瓜">西瓜</label>
			<p class="info"></p>
		</div>
		<div id="css">
			<ul>
				<li>HTML</li>
				<li>css</li>
				<li>javascript</li>
				<li>jquery</li>
				<li>vue</li>
			</ul>
			<button type="button" class="btnChange1">修改字体大小</button>
			<button type="button" class="btnChange2">修改字体和背景颜色</button>
		</div>
		<div id="css1">
			<ul>
				<li>HTML</li>
				<li>css</li>
				<li>javascript</li>
				<li>jquery</li>
				<li>vue</li>
			</ul>
			<button type="button" class="btnAddCN">增加类名</button>
			<button type="button" class="btnRemoveCN">移除类名</button>
			<button type="button" class="btnToggleCN">切换类名</button>
		</div>
		<div id="css2">
			<div class="box">box1</div>
			<div class="box">
				box2
				<div class="box1">box3</div>
			</div>
			<p class="info1"></p>
		</div>
		<div id="cssContent">
			<p><strong style="color: #FF6666;">Hello World</strong></p>
			html()是: <input class="text1">
			text()是: <input class="text2">
			<button type="button" class="get1">获取html和文本</button>
			<button type="button" class="set1">设置html</button>
			<button type="button" class="set2">设置文本</button>
		</div>
		<div id="cssFormContent">
			<input type="text" class="text3" value="hello world">
			<input type="text" class="text4">
			<button type="button" class="get2">获取表格文本</button>
			<button type="button" class="set3">设置表格文本</button>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			$("#btn_src").click(function(){
				alert($(".image").attr("src"));
			})
			$("#btn_alt").click(function(){
				alert($(".image").attr("alt"));
			})
			var flag = true;
			$("#btn_next").click(function(){
				if(flag){
					$(".image").attr({"src":"img/2.png","alt":"佐助"});
					flag = false;
				}else{
					$(".image").attr({"src":"img/1.png","alt":"鼬"});
					flag = true;
				}
			})
			$("#btn_remove").click(function(){
				$(".imgBox img").removeAttr("class");
			})
			$("#btn_add").click(function(){
				$(".imgBox img").attr("class","image");
			})
			$('input[type="radio"]').change(function(){
				// var bool = $(this).attr("checked");	//无法获取表单属性
				var bool = $(this).prop("checked");
				if(bool){
					$(".info").text("你选择的是:"+$(this).val());
				}
			})
			$('#css .btnChange1').click(function(){
				$('#css ul li:nth-child(odd)').css("font-size","20px");
			})
			$('#css .btnChange2').click(function(){
				$('#css ul li:nth-child(even)').css({
					"color":"hotpink",
					"background-color":"silver",
				});
			})
			$("#css1 .btnAddCN").click(function(){
				$("#css1 li").addClass("select");
			})
			$("#css1 .btnRemoveCN").click(function(){
				$("#css1 li").removeClass("select");
			})
			$("#css1 .btnToggleCN").click(function(){
				$("#css1 li:nth-child(odd)").toggleClass("select");
			})
			$(".box").click(function(){
				var width = $(this).width();
				alert(width);
			})
			$(".box1").click(function(){
				$(this).width(100);
				var top = $(this).offset().top;
				var left = $(this).offset().left;
				var top1 = $(this).position().top;
				var left1 = $(this).position().left;
				$(".info1").text("box3距离屏幕上边:"+top+"box3距离屏幕左边:"+left+"box3距离box2上边:"+top1+"box3距离box2左边:"+left1);
			})
			$(window).scroll(function(){
				var top = $(this).scrollTop();
				console.log("滚动距离"+top+"px");
			})
			$("#cssContent .get1").click(function(){
				var strHtml = $("#cssContent p").html()
				var strText = $("#cssContent p").text()
				$(".text1").val(strHtml)
				$(".text2").val(strText)
			})
			$("#cssContent .set1").click(function(){
				$("#cssContent p").html("<strong style='color: #FF6666;'>Hello World</strong>")
			})
			$("#cssContent .set2").click(function(){
				$("#cssContent p").text("你好世界")
			})
			$("#cssFormContent .get2").click(function(){
				alert($(".text3").val());
			})
			$("#cssFormContent .set3").click(function(){
				$(".text4").val($(".text3").val())
			})
		})
	</script>
</html>
